@charset "utf-8";
@import url('./common.less');

@import url('./header.less');

@import url('./footer.less');

.header-img {
	width: 100%;
	height: 90px;
	position: relative;
	overflow: hidden;

	img {
		height: 100%;
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		cursor: pointer;
	}

}

.header-list {
	width: 100%;
	height: 50px;
	background-color: #000;

	ul {
		width: 1200px;
		margin: 0 auto;

		li {
			float: left;

			a {
				padding-right: 70px;
				display: block;
				color: rgba(241, 241, 241, 0.8);
				font-size: 14px;
				line-height: 50px;
			}
		}
	}
}

nav {
	position: absolute;
	top: 140px;
	z-index: 10;
}

@keyframes bannerinfo {
	0% {
		transform: translate(50%);
		opacity: 0;
	}

	100% {
		transform: translate(0);
		opacity: 1;
	}
}

.banner {
	width: 100%;
	height: 770px;
	position: relative;
	overflow: hidden;
	z-index: 1;

	ul {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.white {
			color: #fff;
		}

		.black {
			color: #333;
		}

		li {
			float: left;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 100%;
			top: 0;
			z-index: 1;

			&:first-child {
				left: 0;
				z-index: 1;
			}

			.banner-info {
				width: 50%;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -70px;
				text-align: center;
				z-index: 6;

				h3 {
					font-size: 40px;
					font-weight: bold;
					margin-bottom: 16px;
					line-height: 1;
				}

				p {
					font-size: 18px;
					margin-bottom: 16px;
					line-height: 1;
					opacity: 0.8;
				}

				div {
					padding-top: 14px;

					a {
						display: block;
						width: 124px;
						height: 36px;
						margin: 0 auto;
						border-radius: 20px;
						font-size: 16px;
						line-height: 36px;
						text-align: center;
						color: #fff;
						background-color: #F34141;
						transition: all .3s;

						&:hover {
							background-color: #FB6332;
						}
					}
				}
			}

			.banner-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				z-index: 4;
				overflow: hidden;
			}

			img {
				height: 100%;
				margin: 0 auto;
				position: absolute;
				left: 50%;
				transform: translate(-50%);
			}
		}
	}

	>div {
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translate(-50%);
		z-index: 5;

		span {
			float: left;
			margin: 0 14px;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.2);
			border: 2px solid transparent;
		}

		.banner-actived {
			background-color: transparent !important;
			border: 2px solid #333;
		}

		.banner-actived2 {
			background-color: transparent !important;
			border: 2px solid #fff;
		}
	}
}

.product {
	padding-top: 42px;
	padding-bottom: 66px;
	background-color: #f4f4f4;

	.pro-s1 {
		width: 900px;
		margin: 0 auto;

		.pro-s1-tit {
			padding-top: 45px;
			padding-bottom: 10px;

			p {
				float: left;
				font-size: 22px;
				font-weight: bold;
				color: #333;
				line-height: 34px;
			}

			div {
				float: right;

				span {
					display: block;
					float: left;
					cursor: pointer;
					padding: 0 16px;
					height: 34px;
					font-size: 15px;
					border-radius: 18px;
					color: #666;
					line-height: 34px;
				}

				.tit-actived {
					background-color: #fff;
					color: #f34141;
				}
			}
		}

		.pro-s1-box {
			width: 900px;
		}

		.pro-s1-list {
			margin: 0 -7px -7px;

			li {
				float: left;
				margin: 10px;
				transition: all .5s;

				&:hover {
					box-shadow: 0 6px 70px rgb(0 0 0 / 5%);
				}

				>a {
					display: block;
					width: 208.5px;
					height: 380px;
					overflow: hidden;
					background-color: #fff;
					position: relative;

					img {
						height: 183px;
						position: absolute;
						top: 44%;
						left: 50%;
						transform: translate(-50%, -50%);
						z-index: 2;
					}

					div:first-of-type {
						width: 100%;
						position: absolute;
						left: 0;
						top: 300px;
						text-align: center;

						h4 {
							font-size: 16px;
							line-height: 16px;
							font-weight: bold;
							margin-bottom: 8px;
							color: #333;
						}

						p {
							font-size: 16px;
							color: #333;
							font-weight: bold;
						}
					}
				}


				&:first-child {
					>a {
						width: 437px;
						height: 380px;

						>img {
							width: 120%;
							height: auto;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							z-index: 2;
						}
					}

					div:first-of-type {
						width: 50%;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						text-align: center;

						h4 {
							font-size: 22px;
							line-height: 22px;
							margin-bottom: 14px;
							color: #333;
							font-weight: bold;
						}

						p {
							font-size: 20px;
							color: #333;
							font-weight: bold;
						}
					}
				}

				.pro-new {
					width: 77px;
					height: 28px;
					text-align: center;
					font-size: 14px;
					line-height: 28px;
					color: #F34141;
					border: 1px solid #F34141;
					border-radius: 3px;
					background-color: rgba(243, 65, 65, 0.15);
					position: absolute;
					top: 40px;
					left: 40px;
					z-index: 4;
				}
			}
		}
	}
}

.aside {
	a {
		position: fixed;
		right: 0;
		bottom: 2vh;
		width: 40px;
		height: 159px;
		background: linear-gradient(228deg, #f03446 0%, #ff5b39 100%);
		opacity: .9;
		border-radius: 6px 0px 0px 6px;
		transition: all .3s;
		z-index: 999;

		&:hover {
			opacity: 1;
			width: 48px;
		}

		&:hover>.pingfen {
			display: none;
		}

		&:hover>.pingfen-hover {
			display: block;
		}

		img {
			width: 22px;
			height: 19px;
			margin: 11px auto 4px;
		}

		.pingfen-hover {
			display: none;
		}

		p {
			padding-top: 4px;
			width: 16px;
			height: 105px;
			font-size: 15px;
			font-weight: 500;
			color: #fff;
			line-height: 21px;
			margin: 0 auto;
		}
	}
}